<template>
  <div>
    <div v-loading="loading" style="    color: black;">
      <el-tabs v-model="firstData">
        <el-tab-pane label="隐患记录" name="first">
          <div
            style="height: 60px; color: black; background: rgb(215, 215, 215)"
          >
            <el-row>
              <el-col :span="18">
                <el-col :span="12" style="margin: 4px 0px"
                  >检查结果：{{
                    lookRecordDataList.bizProjectCheckRecord.hiddenDangerStatusName
                  }}</el-col
                >
                <el-col :span="12" style="margin: 4px 0px"
                  >责任区域：{{
                    lookRecordDataList.bizProjectCheckRecord.dutyAreaName
                  }}</el-col
                >
                <el-col :span="12" style="margin: 4px 0px"
                  >检查人：{{
                    lookRecordDataList.bizProjectCheckRecord.checkPeopleNickName
                  }}</el-col
                >
                <el-col :span="12" style="margin: 4px 0px"
                  >检查时间：{{
                    lookRecordDataList.bizProjectCheckRecord.checkTime
                  }}</el-col
                >
              </el-col>
              <el-col :span="6" style="line-height: 54px; text-align: center">
                <el-button v-if="lookRecordDataList.bizProjectCheckRecord.bizExtensionRequests != false"  type="warning" plain size="mini">延期待审</el-button>
                <el-button type="danger" size="mini" v-if="lookRecordDataList.bizProjectCheckRecord.overdueRectification == 1">超期</el-button>
              </el-col>
            </el-row>
          </div>
          <el-row>
            <el-col :span="12" style="margin: 10px 0px"
              >项目名称：{{
                lookRecordDataList.bizProjectCheckRecord.projectName
              }}</el-col
            >
            <el-col :span="12" style="margin: 10px 0px"
              >隐患类别：{{
                lookRecordDataList.bizProjectCheckRecord.hiddenClass
              }}</el-col
            >
            <el-col :span="12" style="margin: 10px 0px"
              >隐患明细：{{
                lookRecordDataList.bizProjectCheckRecord.riskFactor
              }}</el-col
            >
            <el-col :span="12" style="margin: 10px 0px"
              >补充说明：{{
                lookRecordDataList.bizProjectCheckRecord.supplement
              }}</el-col
            >
            <el-col :span="12" style="margin: 10px 0px"
              >检查类型：{{
                lookRecordDataList.bizProjectCheckRecord.checkTypeName
              }}</el-col
            >
            <el-col :span="12" style="margin: 10px 0px"
              >隐患级别：{{
                lookRecordDataList.bizProjectCheckRecord.riskLevelName
              }}</el-col
            >
            <el-col :span="12" style="margin: 10px 0px"
              >分包单位：{{
                lookRecordDataList.bizProjectCheckRecord.subpackageUnitNames
              }}</el-col
            >
            <el-col :span="12" style="margin: 10px 0px"
              >事故隐患：{{
                lookRecordDataList.bizProjectCheckRecord.accidentHiddenName
              }}</el-col
            >
            <el-col :span="12" style="margin: 10px 0px"
              >整改人：{{
                lookRecordDataList.bizProjectCheckRecord.revisePeopleNickName
              }}</el-col
            >
            <el-col :span="12" style="margin: 10px 0px"
              >通知人：{{
                lookRecordDataList.bizProjectCheckRecord.notifierNickName
              }}</el-col
            >
            <el-col :span="12" style="margin: 10px 0px"
              >整改时限：{{
                lookRecordDataList.bizProjectCheckRecord.reviseTheDates
              }}</el-col
            >
            <el-col :span="12" style="margin: 10px 0px"
              >整改要求：{{
                lookRecordDataList.bizProjectCheckRecord.reviseRequire
              }}</el-col
            >
            <el-col :span="24" style="margin: 10px 0px">
              <el-col :span="3"> 相关照片： </el-col>
              <el-col :span="21">
                <span
                  class="spanStyle"
                  v-for="(item, index) in lookRecordDataList
                    .bizProjectCheckRecord.attachList"
                  :key="index"
                >
                  <el-image
                    style="width: 100px; height: 100px"
                    :src="item.name"
                    fit="fill"
                  ></el-image>
                </span>
              </el-col>
            </el-col>
          </el-row>
          <!-- <el-form label-width="100">
            <el-form-item label="项目名称：">
              <span>{{lookRecordDataList.bizProjectCheckRecord.reviseRequire }}</span>
            </el-form-item>
          </el-form> -->
        </el-tab-pane>
      </el-tabs>
      <el-tabs
        v-model="firstData"
        v-for="(item, index) in lookRecordDataList.bizRectifyReviews"
        :key="index"
      >
        <el-tab-pane name="first">
          <span slot="label">{{
            item.operatorType == "2" ? "整改记录" : "复查记录"
          }}</span>
          <el-row v-if="item.operatorType == 2">
            <div style="height: 60px; color: black; background: rgb(215, 215, 215)">
            <el-row>
              <el-col :span="18">
                <el-col :span="12" style="margin: 4px 0px">整改状态：{{ item.operatorStatusName }}</el-col>
              <el-col :span="12" style="margin: 4px 0px">整改时间：{{ item.operatorTime }}</el-col>
              <el-col :span="24" style="margin: 4px 0px">整改人：{{ item.operatorerName }}</el-col>
              </el-col>
               <el-col :span="6" style="line-height: 54px; text-align: center">
                <el-button type="danger" size="mini">超期</el-button>
              </el-col>
            </el-row>
            </div>
            <el-col :span="24">
              <el-col :span="3"> 整改图片： </el-col>
              <el-col :span="21">
                <span
                  class="spanStyle"
                  v-for="url in item.attachList"
                  :key="url.id"
                >
                  <el-image
                    style="width: 100px; height: 100px"
                    :src="url.name"
                    fit="fill"
                  ></el-image>
                </span>
              </el-col>
            </el-col>
          </el-row>
          <el-row v-else>
            <div style="height: 60px; color: black; background: rgb(215, 215, 215)">
            <el-row>
              <el-col :span="12" style="margin: 4px 0px">整改状态：{{ item.operatorStatusName }}</el-col>
              <el-col :span="12" style="margin: 4px 0px">整改时间：{{ item.operatorTime }}</el-col>
              <el-col :span="24" style="margin: 4px 0px">整改人：{{ item.operatorerName }}</el-col>
            </el-row>
            </div>
            <el-col :span="24" style="margin: 4px 0px">
              <el-col :span="3">复查图片：</el-col>
              <el-col :span="21">
                <span
                  class="spanStyle"
                  v-for="url in item.attachList"
                  :key="url.id"
                >
                  <el-image
                    style="width: 100px; height: 100px"
                    :src="url.name"
                    fit="fill"
                  ></el-image>
                </span>
              </el-col>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import { lookRecordData } from "@/api/biz/check/check";

export default {
  props: {
    id: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      // innerVisible:false,
      firstData: "first",
      // 隐患详情
      lookRecordDataList: {
        bizProjectCheck: {
          checkTaskName: null,
        },
        bizProjectCheckRecord: {
          riskLevel: null,
          hiddenMessage: null,
          supplement: null,
          checkType: null,
          hiddenLevel: null,
          subpackageUnit: null,
          accidentHidden: null,
          revisePeople: null,
          notifier: null,
          reviseTheDates: null,
          reviseRequire: null,
          photo: null,
        },
      },
      loading: true,
      ids: this.id,
    };
  },

  methods: {
    //隐患详情
    getList() {
      this.loading = true;
      lookRecordData(this.ids).then(({ data }) => {
        this.lookRecordDataList = data;
        this.lookRecordDataList.bizProjectCheckRecord.attachList.forEach(
          (item) => {
            item.name =
              process.env.VUE_APP_MINIO_BASE_API +
              "/" +
              item.bucket +
              "/" +
              item.name;
          }
        );
        this.lookRecordDataList.bizRectifyReviews.forEach((items) => {
          items.attachList.forEach((item) => {
            item.name =
              process.env.VUE_APP_MINIO_BASE_API +
              "/" +
              item.bucket +
              "/" +
              item.name;
          });
        });
        this.loading = false;
      });
    },
  },

  components: {},

  computed: {},

  created() {},
  watch: {
    id: {
      handler(newVal, oldVal) {
        this.ids = newVal;
        this.getList();
      },
      immediate: true,
      deep: true,
    },
  },
};
</script>
<style scoped></style>
